<!--
 * @Date: 2023-12-20 17:33:04
 * @LastEditTime: 2024-01-17 11:30:11
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      title="提取记录"
      color="#fff"
      leftIcon="left"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    ></uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <!-- <view class="row">
        <view class="left">
          <view class="title-color">提取金额</view>
        </view>
      </view>

      <view class="input-box">
        <input v-model.number="money" placeholder="输入提取金额" />
      </view>

      <view class="tip">
        荷包金额剩余: {{ userInfo.money2 }}元
        <text @click="doAll">全部提出</text>
      </view>

      <view class="row">
        <view class="left">
          <view class="title-color">提取方式</view>
        </view>

        <view class="right">
          <view
            class="type"
            v-for="(item, i) in tiType"
            :key="i"
            @click="changeTiType(i)"
          >
            <view class="check icon">
              <image
                v-if="tiTypeCur == i"
                :src="$img('/static/img/check1_act.png')"
                lazy-load
              ></image>

              <image
                v-else
                :src="$img('/static/img/check1.png')"
                lazy-load
              ></image>
            </view>

            {{ item.title }}
          </view>
        </view>
      </view>

      <template v-if="tiType[tiTypeCur].id == 2">
        <view class="input-box">
          <view class="label">姓名:</view>

          <input v-model="name" placeholder="请输入姓名" />
        </view>

        <view class="input-box">
          <view class="label">账号:</view>

          <input v-model="account" placeholder="请输入账号" />
        </view>
      </template>

      <template v-if="tiType[tiTypeCur].id == 3">
        <view class="input-box">
          <view class="label">开户行:</view>

          <input v-model="bank" placeholder="请输入开户行" />
        </view>

        <view class="input-box">
          <view class="label">姓名:</view>

          <input v-model="name" placeholder="请输入姓名" />
        </view>

        <view class="input-box">
          <view class="label">账号:</view>

          <input v-model="account" placeholder="请输入账号" />
        </view>
      </template>

      <view v-if="pageData" class="tip">
        <text>{{ pageData.withdraw_money }}</text>
        起提,每笔手续费需付
        <text>{{ pageData.withdraw_money_sxf }}</text>
        荷包金额,当日最高可提取
        <text>{{ pageData.max_money }}</text>
      </view>

      <view @click="isAgree = !isAgree" class="agree">
        <view class="icon">
          <image
            v-if="isAgree"
            :src="$img('/static/img/check_act.png')"
            lazy-load
          ></image>

          <image v-else :src="$img('/static/img/check.png')" lazy-load></image>
        </view>

        <view class="agree-r">
          我已阅读并同意
          <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
            《用户协议》
          </text>
          和
          <text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
            《隐私政策》
          </text>
        </view>
      </view>

      <view class="submit" @click="$c.noDouble(doSubmit)">立即提取</view>

      <view class="row">
        <view class="left">
          <view class="title-color">提取记录</view>
        </view>
      </view> -->

      <view class="log">
        <view class="log-item" v-for="(item, i) in listData" :key="i">
          <view class="item-l">
            <view class="title">
              {{ item.status_text }}

              <text v-if="item.reason">({{ item.reason }})</text>
            </view>

            <view class="time">{{ item.addtime }}</view>
          </view>

          <view class="item-money">{{ item.tal_money }}元</view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 15 // 每页数据的数量,默认10
        }
      },

      money: '',
      qrCode: '',
      name: '',
      account: '',
      bank: '',

      listData: [],
      userInfo: uni.getStorageSync('userinfo'),
      qrCodePath: '',
      tiType: [
        {
          id: 2,
          title: '支付宝'
        },
        {
          id: 3,
          title: '银行卡'
        }
      ],
      tiTypeCur: 0,
      pageData: '',
      lastTi: {},
      isAgree: false
    }
  },

  onShow() {
    this.getUserInfo()
  },

  methods: {
    changeTiType(i) {
      this.tiTypeCur = i

      const curId = this.tiType[i].id
      const target = this.lastTi[curId]

      if (target) {
        this.name = target.name
        this.account = target.number
        this.bank = target.bank
      } else {
        this.name = ''
        this.account = ''
      }
    },

    downCallback() {
      this.money = ''

      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
      this.getUserInfo()
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'withdraw_log',
        data: {
          page: num
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.pageData = res.data
            this.listData = this.listData.concat(res.data.list)
            this.mescroll.endByPage(res.data.list.length, res.data.last_page)

            let lastTi = {}
            if (res.data.zhifubao)
              lastTi[res.data.zhifubao.type] = res.data.zhifubao
            if (res.data.yinhangka)
              lastTi[res.data.yinhangka.type] = res.data.yinhangka

            this.lastTi = lastTi

            this.changeTiType(this.tiTypeCur)
          }
        }
      })
    },

    doSubmit() {
      if (!this.money) {
        this.$c.toast({
          title: '请输入金额'
        })
        return
      }

      if (!this.name) {
        this.$c.toast({
          title: '姓名不能为空'
        })
        return
      }

      if (!this.account) {
        this.$c.toast({
          title: '账号不能为空'
        })
        return
      }

      if (this.tiType[this.tiTypeCur].id == 3) {
        if (!this.bank) {
          this.$c.toast({
            title: '开户行不能为空'
          })
          return
        }
      }

      if (!this.isAgree) {
        return this.$c.toast({
          title: '请阅读并同意《用户协议》和《隐私政策》'
        })
      }

      this.req({
        url: 'withdraw',
        data: {
          money: this.money,
          type: this.tiType[this.tiTypeCur].id,
          name: this.name,
          number: this.account,
          bank: this.bank
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 1500,
              success: () => {
                this.getUserInfo()

                this.downCallback()
              }
            })
          }
        }
      })
    },

    upImg() {
      let that = this

      uni.chooseImage({
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        count: 1,
        success: ({ tempFilePaths, tempFiles }) => {
          uni.uploadFile({
            url: that.siteBaseUrl + 'picture',
            filePath: tempFilePaths[0],
            name: 'file',
            success: e => {
              let res = JSON.parse(e.data)
              if (res.status == 1) {
                this.qrCode = res.data.imgurl
                this.qrCodePath = res.data.path
              }
            }
          })
        },
        fail: error => {}
      })
    },

    doAll() {
      this.money = this.userInfo.money2 * 1
    },

    getUserInfo() {
      this.req({
        url: 'user',
        data: {},
        success: res => {
          if (res.status == 1) {
            this.userInfo = res.data.userinfo

            uni.setStorageSync('userinfo', res.data.userinfo)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 30rpx 30rpx;

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;

    .left {
      display: flex;
      align-items: center;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      .title-color {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: transparent;

        background: linear-gradient(
          90deg,
          #6adeff 0%,
          #7ab5ff 50%,
          #ff7feb 100%
        );
        background-clip: text;
      }

      .desc {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }

    .right {
      display: flex;
      align-items: center;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      .to-rule {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #d0d1ff;
      }

      .right-icon {
        width: 32rpx;
        height: 32rpx;
      }

      .type {
        display: flex;
        align-items: center;

        .check {
          width: 40rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .type + .type {
        margin-left: 40rpx;
      }
    }
  }

  .input-box {
    margin-top: 30rpx;
    height: 80rpx;
    border: 1px solid #d0d1ff;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    align-items: center;

    .label {
      padding: 0 20rpx;
      // border-right: 1rpx solid #ccc;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
    }

    input {
      flex: 1;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
    }
  }

  .tip {
    margin-top: 10rpx;

    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #dddddd;

    text {
      padding: 0 10rpx;

      color: #d0d1ff;
    }
  }

  .pic {
    margin-top: 30rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
    border: 1rpx solid #d0d1ff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .up {
      width: 100%;
      height: 100%;
      position: relative;

      &::before,
      &::after {
        content: '';
        width: 4rpx;
        height: 40rpx;
        background: #d0d1ff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      &::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }
    }
  }

  .agree {
    display: flex;
    padding: 40rpx 0 0;

    .icon {
      width: 32rpx;
      height: 32rpx;
    }

    .agree-r {
      flex: 1;
      word-wrap: break-word;
      word-break: break-all;
      padding-left: 20rpx;
      line-height: 32rpx;

      font-size: 26rpx;
      color: #9d9d9d;

      text {
        color: #d0d1ff;
      }
    }
  }

  .submit {
    margin: 30rpx 0 0;

    width: 100%;
    height: 80rpx;
    background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #222222;
  }

  .log {
    padding: 1rpx 10rpx 0;

    .log-item {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #333;

      .item-l {
        flex: 1;
        padding-right: 30rpx;

        .title {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #d0d1ff;

          text {
            font-size: 24rpx;
            padding-left: 20rpx;
          }
        }

        .time {
          margin-top: 6rpx;

          font-size: 25rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cccccc;
        }
      }

      .item-money {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>
